<template>
  <div class="hore-edit">
    <h3>编辑英雄</h3>
    <hr />
    <div class="form-group">
      <label class="col-sm-2 control-label">英雄名称</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" style="width:200px" v-model="name" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">英雄性别</label>
      <div class="col-sm-10">
        <input type="radio" value="男" v-model="gender" /> 男
        <input type="radio" value="女" v-model="gender" /> 女
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-primary" @click="updata">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      gender: "",
    };
  },
  methods: {
    getInfo() {
      //回显数据   获取用户信息
      this.$http
        .get(`http://localhost:6005/heroList/${this.$route.query.id}`)
        .then((res) => {
          console.log(res);
          this.name = res.data.name;
          this.gender = res.data.gender;
        });
    },
    updata() {
      this.$http
        .put(`http://localhost:6005/heroList/${this.$route.query.id}`, {
          name: this.name,
          gender: this.gender,
          time: new Date(),
        })
        .then((res) => {
          //完成跳转
          this.$router.push({
            path: "/herolist",
          });
        });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style>
</style>